<template lang="pug">
modal(name="previewDetail", width="100%", height="100%" @before-open="beforeOpen")
  .preview
    .preview-close.el-icon-close(@click="close")
    .preview-header
      .preview-detail
        .preview-detail-imgs
          .detail-img
            img(:src="viewImg")
          .detail-img-list
            .detail-img-item(v-for="item in detail.img")
              img(:src="item", @click="changeImg(item)", @mouseenter="enter(item)", :class="{'detail-img_active' : item === viewImg}")
        .preview-detail-content
          .preview-detail-name {{detail.goods_name}}
          .detail-price
            .detail-price-item
              .price-item-label 建议零售价
              .price-item-num ¥{{price.shopPrice}}
            .detail-price-item
              .price-item-label 出厂价
              .price-item-selling ¥{{price.sellingPrice}}
          .detail-select-items
            .detail-select-item(v-for="item, index in detail.spec")
              .select-item-label {{item.name}}
              .select-item_content
                .select-item_select(v-for="row in item.spec_item" @click="selectSpec(row, index)", :class="{'select-item_active' : item.activeId === row.id}")
                  img(:src="row.src" v-if="row.src")
                  span {{row.item}}
      .preview-brand
        .preview-brand-info
          .preview-brand-logo
            img(src="https://static.chaodp.com/o_1d4rvd8p1hhli0oe471h0o1tli1o.jpg")
          .preview-brand-name {{detail.supplier.suppliers_name}}
          .preview-brand-item
            .brand-item-label 客服电话：
            .brand-item-value {{detail.supplier.mobile}}
          .preview-brand-item
            .brand-item-label 客服QQ：
            .brand-item-value {{detail.supplier.qq}}
          .preview-brand-item
            .brand-item-label 公司地址：
            .brand-item-value {{detail.supplier.address}}
    .preview-goods-detail(v-if="detail.attr.length")
      .goods-detail-title 商品详情
      .goods-detail-content
        .goods-brand-name 品牌：{{detail.brand_name}}
        .goods-product_params
          .product_params-title 产品参数
          .product_params-contnet
            .product_params-items(v-for="item in detail.attr")
              .product_params-item(v-for="row in item")
                .product_params-item-label {{row.attr_name}}：
                .product_params-item-value {{row.attr_value}}
    .detail-boder.detail-footer-imgs
      .detail-footer-img(v-for="item in detail.goods_content")
        .detail-goods-text(v-if="item.type === 'text'") {{item.content}}
        .detail-goods-video(v-if="item.type === 'video'")
          video(:src="item.content" controls="controls")
        .detail-goods-img(v-if="item.type === 'image'")
          img(:src="item.content")
</template>

<script>
import { goodsInfo } from 'api'
export default {
  name: 'previewDetail',
  data () {
    return {
      viewImg: '',
      detail: {
        supplier: {
          suppliers_name: '',
          suppliers_logo: ''
        },
        attr: []
      },
      specKeys: [],
      price: {
        marketPrice: '',
        shopPrice: '',
        sellingPrice: '',
        storeCount: 1
      }
    }
  },
  methods: {
    close () {
      this.$modal.hide('previewDetail')
    },
    async beforeOpen ({ params }) {
      try {
        const { data } = await this.$axios.get(goodsInfo, { params: { goods_id: params.goods_id } })
        if (data.spec.length > 0) {
          data.spec.map((item, index) => item.spec_item.map((v, num) => {
            if (num === 0) {
              item.activeId = v.id
              this.specKeys.splice(index, 1, v.id)
            }
          }))
          this.changePrice(data)
        } else {
          this.price.marketPrice = data.market_price
          this.price.shopPrice = data.shop_price
          this.price.sellingPrice = data.selling_price
          this.price.storeCount = data.store_count
        }
        this.viewImg = data.original_img
        this.detail = data
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    // 查找选择后价格发生变化的数据
    changePrice (data) {
      if (this.specKeys.length === data.spec.length) {
        this.key = Array.from(new Set(this.specKeys)).sort((a, b) => { return a - b }).join('_')
        let newPrice = data.spec_value[this.key]
        this.price.marketPrice = newPrice.market_price
        this.price.shopPrice = newPrice.shop_price
        this.price.sellingPrice = newPrice.selling_price
        this.price.storeCount = newPrice.store_count
      }
    },
    selectSpec (row, index) {
      this.detail.spec.map(item => item.spec_item.map(v => {
        if (row.id === v.id) {
          item.activeId = row.id
        }
      }))
      this.specKeys.splice(index, 1, row.id)
      if (this.specKeys.length === this.detail.spec.length) {
        this.key = Array.from(new Set(this.specKeys)).sort((a, b) => { return a - b }).join('_')
        let newPrice = this.detail.spec_value[this.key]
        this.price.marketPrice = newPrice.market_price
        this.price.shopPrice = newPrice.shop_price
        this.price.sellingPrice = newPrice.selling_price
        this.price.storeCount = newPrice.store_count
        if (newPrice.spec_img) this.viewImg = newPrice.spec_img
      }
    },
    changeImg (img) {
      this.viewImg = img
    },
    enter (img) {
      this.viewImg = img
    }
  }
}
</script>

<style lang="scss" scoped>
.preview {
  position: relative;
  height: 900px;
  // border: 1px solid #ddd;
  overflow-y: auto;
  box-sizing: border-box;
  & .preview-close {
    position: fixed;
    right: 20px;
    top: 20px;
    font-size: 40px;
    cursor: pointer;
  }
}
.preview-header {
  display: flex;
  width: 1080px;
  margin: 20px auto;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.preview-detail {
  display: flex;
  padding: 30px;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
.detail-img {
  width: 300px;
  height: 300px;
  margin-right: 20px;
  box-sizing: border-box;
}
.detail-img-list {
  position: relative;
  width: 320px;
  overflow: hidden;
  display: flex;
  padding: 0 20px;
  align-items: center;
  margin-top: 20px;
  box-sizing: border-box;
}
.detail-img-item {
  width: 60px;
  height: 60px;
  margin-right: 14px;
  box-sizing: border-box;
}
.detail-img_active {
  border: 2px solid #e53e41;
}
.preview-detail-name {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  box-sizing: border-box;
}
.detail-price {
  width: 450px;
  height: 153px;
  padding: 23px 20px;
  margin: 20px 0 30px 0;
  background: #fdf2e9;
  border-radius: 1px;
  box-sizing: border-box;
}
.detail-price-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.price-item-label {
  margin-right: 20px;
  font-size: 14px;
  color: #666;
  box-sizing: border-box;
}
.price-item-num {
  font-size: 18px;
  color: #333;
  text-decoration: line-through;
  box-sizing: border-box;
}
.price-item-selling {
  font-size: 32px;
  color: #ff6c00;
  box-sizing: border-box;
}
.preview-brand {
  width: 250px;
  min-width: 250px;
  box-sizing: border-box;
}
.preview-brand-info {
  padding: 0 20px;
  box-sizing: border-box;
}
.preview-brand-logo {
  width: 100px;
  height: 100px;
  margin: 30px auto 20px;
  box-sizing: border-box;
  & img {
    width: 100px;
    height: 100px;
  }
}
.preview-brand-name {
  margin-bottom: 30px;
  font-size: 16px;
  color: #333;
  text-align: center;
  box-sizing: border-box;
}
.preview-brand-item {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.brand-item-label {
  min-width: 75px;
  line-height: 30px;
  color: #999;
  font-size: 14px;
  box-sizing: border-box;
}
.brand-item-value {
  color: #151515;
  font-size: 14px;
  line-height: 30px;
  box-sizing: border-box;
}
.preview-goods-detail {
  width: 1080px;
  margin: 0 auto 20px;
  border: 1px solid #ddd;
}
.goods-detail-title {
  height: 44px;
  width: 100%;
  line-height: 44px;
  padding: 0 30px;
  background: #efefef;
}
.goods-detail-content {
  padding: 30px;
  font-size: 12px;
  color: #333;
}
.goods-product_params {
  margin-top: 30px;
}
.product_params-title {
  margin-bottom: 10px;
  color: #999;
}
.product_params-contnet {
  display: flex;
  justify-content: space-between;
}
.product_params-items {
  margin-right: 60px;
}
.product_params-item {
  display: flex;
  align-items: flex-start;
  line-height: 30px;
}
.product_params-item-label {
  max-width: 100px;
  color: #999;
}
.product_params-item-value {
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #151515;
}
.detail-boder {
  width: 1080px;
  margin: 0 auto 20px;
  border: 1px solid #ddd;
}
.detail-footer-imgs {
  padding: 30px 0 0;
  text-align: center;
}
.detail-footer-img img {
  height: 100%;
}
.detail-goods-text {
  font-size: 20px;
}
.detail-goods-video {
  width: 750px;
  margin: 0 auto;
}
.detail-select-item {
  display: flex;
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}
.select-item-label {
  width: 100px;
  min-width: 100px;
  padding: 10px 0;
  text-align: center;
  color: #666;
}
.select-item_content {
  display: flex;
  flex-wrap: wrap;
}
.select-item_select {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0 10px 10px 0;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  &.select-item_active {
    border-color: #ff6c00;
    color: #ff6c00;
  }
}
</style>
